<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
        <div class="music-top">
            <p class="iconfont icon-xialacaidanxia" @click="fan"></p>
            <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
                :label="item"
                v-for="(item, index) in musicTop"
                :key="index"
            ></el-tab-pane>
            </el-tabs>
            <p class="iconfont icon-zhuanfa"></p>
        </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import pinglun from "./pinglun.vue";
import { alert_parent } from "../alert/alert_mixin";
import Alert from "../alert/alert.vue";
export default {
    components: {
        Alert,
        pinglun,
    },
  name: '',
  mixins: [alert_parent],
  data() {
    return {
      msg: '测试',
      musicTop: ["音频", "评论", "相似"],
      components: "",
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
      
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
      
  },
  // Vue方法定义
  methods: {
    fan() {
      this.$router.history.go(-1);
    },
    handleClick(tag,e) {
      if(e.target.innerHTML=='评论'){
        //   console.log(e)
          this.$emit('com',this.components)
          this.components = "pinglun";
            this.transition = {
                to: "right",
                from: "right",
            };
            console.log(this.components)
            this.openAlert();
            
      }
      
    },
  }
}
</script>

<style scoped>
/* @import url(''); 引入css类 */

.music-top {
  width: 100%;
  height: 1.173333rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: rgba(255, 255, 255, 49);
  font-size: 16px;
  text-align: center;
  font-family: PingFangSC-regular;
  border-bottom: 1px solid white;
  position: fixed;
  top: 0;
  left: 0;
  background: #6c8c93 100%;
  z-index: 888;
}
.music-top p {
  width: 30%;
  font-size: 20px;
}

.music-top .el-tabs {
  /* width: 75%; */
  height: 1.03333rem;
}
.music-top .el-tabs .el-tab-pane:nth-child(1) {
  color: white;
}
.music-top .el-tabs__nav-scroll {
  border: none;
  height: 1rem;
}
.music-top .el-tabs__active-bar {
  background-color: white;
}
.music-top .el-tabs__item:hover {
  color: white;
}

.music-top .el-tabs__nav-wrap::after {
  background: #6c8c93 100%;
}
.music-top .el-tabs__active-bar {
  background-color: white;
  height: 3px;
}
.music-top .el-tabs__item.is-active {
  color: white;
}
.music-top .el-tabs__nav-scroll .el-tabs__active-bar #tab-0 {
  color: white;
}
</style>